<template>
    <div class="articel">
        <el-card class="box-card">
            <span class="title">动态展示</span>
            <el-checkbox-group v-model="checkList">
                <el-checkbox :label="$t('msg.article.ranking')"></el-checkbox>
                <el-checkbox :label="$t('msg.article.title')"></el-checkbox>
                <el-checkbox :label="$t('msg.article.author')"></el-checkbox>
                <el-checkbox :label="$t('msg.article.publicDate')"></el-checkbox>
                <el-checkbox :label="$t('msg.article.desc')"></el-checkbox>
                <el-checkbox :label="$t('msg.article.action')"></el-checkbox>
            </el-checkbox-group>
        </el-card>
        <el-card class="box-card">
            <el-table :data="articleList" border style="width: 100%">
                <el-table-column prop="ranking" :label="$t('msg.article.ranking')">
                </el-table-column>
                <el-table-column prop="title" :label="$t('msg.article.title')">
                </el-table-column>
                <el-table-column prop="author" :label="$t('msg.article.author')">
                </el-table-column>
                <el-table-column prop="publicDate" :label="$t('msg.article.publicDate')">
                </el-table-column>
                <el-table-column prop="desc" :label="$t('msg.article.desc')">
                </el-table-column>
                <el-table-column prop="action" :label="$t('msg.article.action')">
                    <el-button size="mini" type="primary">查看</el-button>
                    <el-button size="mini" type="danger">删除</el-button>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum" :page-sizes="[5,10,50,100,200]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>
        文章排名
    </div>
</template>

<script>
import {articleList} from "../../api/article" 
export default {
 name : "", 
 data(){
  return {
      checkList:["排名","标题","作者","发布时间","内容简介","操作"],
      articleList:[],
      pagenum:1,
      pagesize:10,
      total:0,
  }
 },
 created(){
     this.getList()
 },
 components : {

 },
 methods:{
     async getList(){
        let res = await articleList(this.pagenum,this.pagesize)
        console.log(res);
        this.articleList = res.list
        this.total = res.total
        console.log(this.total);
     },
     handleSizeChange(newsize){
         this.pagesize=newsize
         this.getList()
     },
     handleCurrentChange(newNum){
         this.pagenum=newNum
         this.getList()
     }
 }
}
</script>


<style lang="scss" scoped>
.articel {
  .box-card:nth-child(1) {
    display: flex;
    height: 82px;
    line-height: 40px;
    margin-bottom: 20px;
    .title {
      display: inline-block;
      margin-right: 20px;
      font-weight: 700;
      font-size: 14px;
    }
    .el-checkbox-group {
      display: inline-block;
    }
  }
}
</style>